<template>
  <div class="app-container">
    <el-form :show-message="!($route.query.isInfo || isInfo)" ref="elForm" :disabled="$route.query.isInfo || isInfo"
      :model="formData" :rules="rules" size="medium" label-width="150px">
      <h2 style="text-align: center">设备检测证书上传记录</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="设备名称" prop="deviceId">
            <div style="display: flex;">
              <el-select :disabled="$route.query.isEdit" filterable v-model="formData.deviceId" placeholder="请选择设备名称"
                clearable @change="changeDevice" :style="{ width: '100%' }" :filter-method="changeInput">
                <el-option v-for="(item, index) in deviceOptions" :key="index" :label="item.deviceName"
                  :value="item.deviceId" :disabled="item.disabled">
                  <span style="float: left">{{ item.deviceName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.deviceCode
                  }}</span></el-option>
              </el-select>
              <el-button v-if="!($route.query.isInfo || isInfo)" type="primary" size="mini" @click="sousuo">查询</el-button>
            </div>
          </el-form-item>

        </el-col>
        <el-col :span="8">
          <el-form-item label="管制编号" prop="deviceCode">
            <el-input disabled v-model="formData.deviceCode" placeholder="请输入管制编号" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="业务id" prop="busId">
            <el-input
              disabled
              v-model="formData.busId"
              placeholder="请输入业务id"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="检定/校准单位" prop="organ">
            <el-select filterable v-model="formData.organ" placeholder="请选择检定/校准单位" clearable :style="{ width: '100%' }">
              <el-option v-for="dict in dict.type.sys_organ_type" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证书编号" prop="certCode">
            <el-input v-model="formData.certCode" placeholder="请输入证书编号" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="管理编号" prop="manageCode">
            <el-input
              v-model="formData.manageCode"
              placeholder="请输入管理编号"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="检定/校准日期" prop="checkDate">
            <el-date-picker @change="changeDate" v-model="formData.checkDate" format="yyyy-MM-dd"
              value-format="yyyy-MM-dd" :style="{ width: '100%' }" placeholder="请选择检定/校准日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="下次检定/校准日期" prop="effectDate">
            <el-date-picker disabled v-model="formData.effectDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择下次检定/校准日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="检定人" prop="checkUserName">
            <el-input v-model="formData.checkUserName" placeholder="请输入检定人" clearable
              :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="校准费用" prop="correct">
            <el-input v-model="formData.correct" placeholder="请输入校准费用" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证书/报告性质" prop="type">
            <el-select v-model="formData.type" placeholder="请选择证书/报告性质" clearable :style="{ width: '100%' }">
              <el-option v-for="dict in dict.type.sys_device_cert_type" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="证书/报告性质" prop="type">
            <el-radio-group v-model="formData.type" size="medium">
              <el-radio
                v-for="(item, index) in typeOptions"
                :key="index"
                :label="item.value.toString()"
                :disabled="item.disabled"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="8">
          <el-form-item label="证书照片" prop="certImage">
            <imageUpload
              :limit="1"
              :disabled="$route.query.isInfo"
              :fileType="['png', 'jpg', 'jpeg', 'PDF', 'pdf']"
              v-model="formData.certImage"
            />
          </el-form-item>
        </el-col> -->
      </el-row>
      <h4 class="form-header h4" style="margin-top: 20px">附件信息</h4>
      <el-form-item label="" prop="oss">
        <FileUploadBase :isDelete="!$route.query.isInfo" v-model="formData.oss"></FileUploadBase>
      </el-form-item>
      <el-col :span="24" v-if="btnShow">
        <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
          <el-button v-if="!($route.query.isInfo || isInfo)" type="primary" @click="submitForm">提交</el-button>
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import { listSelectChey } from "@/api/device/device.js";
import moment from "moment";
import {
  deviceCheckCertAdd,
  updategdeviceCheckCert,
  deviceCheckCertInfo,
} from "@/api/device/deviceCheckCert.js";
export default {
  components: {},
  dicts: [
    "sys_organ_type",
    "sys_device_cert_type"
  ],
  components: {},
  props: {
    isInfo: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
    btnShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      deviceOptions: [],
      flag: 0,
      formData: {
        correct: undefined,
        checkUserName: undefined,
        remark: undefined,
        deviceId: undefined,
        manageCode: undefined,
        num: undefined,
        code: undefined,
        effectDate: null,
        checkDate: null,
        type: "1",
        isReplenish: "0",
        isQualified: "0",
        isUse: "0",
        isAgreement: "0",
        certCode: undefined,
        deviceCode: undefined,
        busId: undefined,
        certImage: undefined,
        oss: undefined,
        organ: undefined,
        certTypeValue: undefined
      },
      rules: {
        certTypeValue: [
          {
            required: true,
            message: "请选择证书/报告性质",
            trigger: "change",
          },
        ],
        certImage: [
          {
            required: true,
            message: "证书照片不能为空",
            trigger: "change",
          },
        ],
        oss: [
          {
            required: true,
            message: "附件不能为空",
            trigger: "change",
          },
        ],
        correct: [
          {
            required: false,
            message: "请输入校准费用",
            trigger: "change",
          },
        ],

        checkUserName: [
          {
            required: true,
            message: "请输入检定人",
            trigger: "change",
          },
        ],
        certCode: [
          {
            required: true,
            message: "请输入证书编号",
            trigger: "blur",
          },
        ],
        busId: [
          {
            required: true,
            message: "请输入业务id",
            trigger: "blur",
          },
        ],
        deviceId: [
          {
            required: true,
            message: "请输入设备名称",
            trigger: "blur",
          },
        ],
        manageCode: [
          {
            required: true,
            message: "请输入管理编号",
            trigger: "blur",
          },
        ],
        remark: [
          {
            required: true,
            message: "补充说明不能为空",
            trigger: "blur",
          },
        ],
        effectDate: [
          {
            required: true,
            message: "请选择下次检定/校准日期",
            trigger: "change",
          },
        ],
        checkDate: [
          {
            required: true,
            message: "请选择检定/校准日期",
            trigger: "change",
          },
        ],
        type: [
          {
            required: true,
            message: "记录类型不能为空",
            trigger: "change",
          },
        ],
        isReplenish: [
          {
            required: true,
            message: "是否已补充 不能为空",
            trigger: "change",
          },
        ],
        isQualified: [
          {
            required: true,
            message: "产品合格证不能为空",
            trigger: "change",
          },
        ],
        isUse: [
          {
            required: true,
            message: "使用说明书不能为空",
            trigger: "change",
          },
        ],
        isAgreement: [
          {
            required: true,
            message: "合同情况不能为空",
            trigger: "change",
          },
        ],
      },
      typeOptions: [
        {
          label: "仪器设备计量检定",
          value: 1,
        },
        // {
        //   label: "维修",
        //   value: 2,
        // },
      ],
      isReplenishOptions: [
        {
          label: "否",
          value: 0,
        },
        {
          label: "是",
          value: 1,
        },
      ],
      isQualifiedOptions: [
        {
          label: "有",
          value: 0,
        },
        {
          label: "无",
          value: 1,
        },
      ],
      isUseOptions: [
        {
          label: "有",
          value: 0,
        },
        {
          label: "无",
          value: 1,
        },
      ],
      isAgreementOptions: [
        {
          label: "符合",
          value: 0,
        },
        {
          label: "不符合",
          value: 1,
        },
      ],
      deviceBuyId: '',
      keyword:''
    };
  },
  computed: {},
  created() {
    // this.formData.deviceId = Number(this.$route.query.deviceId);
    console.log(this.$route.query, 'this.$route.query');
    this.deviceBuyId = this.$route.query.id;
    console.log(this.deviceBuyId);
    this.formData.busId = this.$route.query.busId || '';
    this.flag = this.$route.query.flag || 0
    if (this.$route.query.isEdit || this.$route.query.isInfo || this.isInfo || this.$route.query.isClone) {
      this.getinfo();
    } else {
      this.listSelect(0);
    }
    // this.formData.deviceId = Number(this.$route.query.deviceId);
    // this.formData.organ = this.deviceOptions.find((e) => e.deviceId == this.formData.deviceId).organ

  },
  mounted() { },
  methods: {
    changeInput(e) {
      console.log(e);
      this.keyword = e
    },
    sousuo() {
      listSelectChey({ status: 'end', keyword:  this.keyword  }).then((response) => {
        this.deviceOptions = response.data;
        console.log(this.formData.deviceId);
        this.changeDevice(this.formData.deviceId);
      });
    },
    changeUser(e) {
      this.formData.checkUserName = e.nickName;
    },
    changeDate(e) {
      if(!this.formData.deviceId){
        this.$message.error('请先选择设备，在重新选择日期！！！')
        return
      }
      this.formData.effectDate = moment(e)
        .add(Number(this.formData.checkPeriod), "months").subtract(1, 'days')
        .format("yyyy-MM-DD");
    },
    changeDevice(i) {
      let row = this.deviceOptions.find((e) => e.deviceId == i);
      if (row) {
        console.log(row);
        this.formData.checkPeriod = row.checkPeriod;
        this.formData.deviceCode = row.deviceCode;
        this.formData.checkPeriod = row.checkPeriod;
        this.formData.busId = row.deviceCheckAskId
      } else {
        this.formData.deviceCode = undefined;
      }
      console.log(row);
    },
    listSelect(e) {
      let query = null;
      // if (this.$route.query.isWx !== "undefined") {
      //   query = { status: 2, busStatus: 7 };
      // } else {
      //   query = { status: 0, busStatus: 8 };
      // }
      listSelectChey({ status: 'end', value: e }).then((response) => {
        this.deviceOptions = response.data;
        console.log(this.formData.deviceId);
        // this.formData.organ = this.deviceOptions.find((e) => e.deviceId == this.formData.deviceId).organ||''
        this.changeDevice(this.formData.deviceId);
      });
    },
    getinfo() {
      this.listSelect();
      deviceCheckCertInfo(this.$route.query.id || this.id).then((response) => {
        console.log(response.data);
        this.formData = response.data;
        if (this.$route.query.isClone) {
            //colne
            this.formData.deviceId = undefined;
            this.formData.deviceCode = undefined;
          }
        console.log(this.formData);
      });
    },
    submitForm() {
      // this.$refs["elForm"].validate((valid) => {
        // if (valid) {
          let query = JSON.parse(JSON.stringify(this.formData));
          if(!query.deviceId){
            this.$message.warning("请先选择设备");
            return
          }
          if(!query.organ){
            this.$message.warning("检定/校准单位");
            return
          }
          if(!query.oss){
            this.$message.warning("请先上传附件");
            return
          }
          console.log(this.deviceBuyId, this.flag);
          if (this.deviceBuyId != undefined && this.flag == 0) {
            console.log('修改');
            updategdeviceCheckCert(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            console.log('新增');
            query.deviceCheckCertId = query.deviceCheckCertId ? '' : ''
            deviceCheckCertAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        // }
      // });
    },
    resetForm() {
      this.$tab.closeOpenPage();
    },
  },
};
</script>
